﻿@model List<SmallJob.Model.Feature>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    .itemselected
    {
        border: 1px solid #CCCCCC;
        border-radius: 4px 4px 4px 4px;
        display: block;
        margin: 4px;
        padding: 15px 10px;
        text-decoration: none;
        position: relative;
    }

        .itemselected span
        {
            display: block;
            position: absolute;
            right: 5px;
            top: 1px;
            cursor: pointer;
        }

            .itemselected span:hover
            {
                color: Red;
            }
</style>
<div style="width: 500px; float: left">
    @using (Html.BeginForm("SaveOrder", "Feature", FormMethod.Post))
    {
        <table class="table table-hover" id="table-configbanner">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Display Number</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @if (Model != null)
                {
                    foreach (var item in Model)
                    {
                    <tr id="@item.ID">
                        <td>
                            <input type="hidden" name="order" value="@item.ID"/>@item.Title

                        </td>
                        <td class="cell-displaynumber">
                            @item.Order
                        </td>
                        <td>
                            <a href="javascript:;" onclick="showDialogProvide(@item.ID)">Edit</a>
                        </td>
                        <td>
                            <a href="javascript:;" onclick="deleteFeature(@item.ID)">Delete</a>
                        </td>
                        <td>
                            <a href="javascript:;" onclick="renameFeature(@item.ID)">Rename</a>
                        </td>
                    </tr>
                    }
                }
            </tbody>
        </table>
        <div class="form-actions" style="text-align: center; margin: 0 auto">
            <button type="submit" class="btn btn-info">Lưu</button>
        </div>
    }
</div>
<div style="width: 300px; height: 250px; float: right">
    @using (Html.BeginForm("Save", "Feature", FormMethod.Post, new { id = "form-feature" }))
    {
        <div class="form-actions" style="text-align: center">
            <div class="control-group" id="f-div">
                <div class="controls">
                    <input class="input-large" id="f-title" name="title" type="text" placeholder="Feature Title" />
                    <span id="f-span" class="help-inline"></span>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Lưu</button>
        </div>
    }
</div>
<div class="modal hide fade" tabindex="-1" role="dialog" style="width: 606px" id="div-provide-box" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        <h4 class="muted text-center vn-modal-headline" id="h-title">Edit Provide</h4>
        <input class="input-xxlarge" id="search-title" type="text" placeholder="Search Provide Title">
        <select multiple="multiple" id="result-title" style="width: 450px; height: 150px">
        </select>
        <button type="button" id="btn-add-provide" class="btn btn-info" style="margin: 10px">Thêm</button>
        <div id="list-item-selected">
        </div>
        <div class="form-actions" style="text-align: center; margin: 0 auto">
            <button type="button" id="btn-cancel-mess" class="btn">Đóng</button>
        </div>
    </div>
</div>
<div class="modal hide fade" tabindex="-1" role="dialog" style="width: 606px" id="div-rename-box" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        @using (Html.BeginForm("Rename", "Feature",FormMethod.Post))
        {
            <input type="hidden" value="0" name="fID" id="h-featureID"/>
            <input class="input-xxlarge" name="fName" id="input-rename" type="text"/>
            <button type="submit" class="btn btn-info" style="margin: 10px">Lưu</button>
        }
    </div>
</div>
<script src="@Url.Content("~/Content/js/jquery.tablednd.js")"></script>
<script type="text/javascript">
    function renameFeature(id) {
        $('#h-featureID').val(id);
        $.post('@Url.Action("GetFeatureTitle","Feature")', { id: id }, function (data) {
            $('#input-rename').val(data);
            $('#div-rename-box').modal({ show: true })
        });
    }
    $('#table-configbanner').tableDnD({
        onDrop: function (table, row) {
            var rows = table.tBodies[0].rows;
            for (var i = 0; i < rows.length; i++) {
                $(rows[i]).find('.cell-displaynumber').text(i + 1);
                var id = rows[i].id;
            }
        }
    });
    $('#f-title').change(function () {
        var t = $('#f-title').val();
        $.post('@Url.Action("CheckTitleIsExist", "Feature")', { title: t }, function (reval) {
            if (reval == true) {
                $('#f-div').addClass('error');
                $('#f-span').text('Feature đã tồn tại');
            }
        });
    });
    $('#form-feature').submit(function (e) {
        var t = $('#f-title').val();
        $.post('@Url.Action("CheckTitleIsExist", "Feature")', { title: t }, function (reval) {
            if (reval == true) {
                $('#f-div').addClass('error');
                $('#f-span').text('Feature đã tồn tại');
                e.preventDefault();
            }
        });
    });
    var curProvideID;
    function showDialogProvide(id) {
        curProvideID = id;
        //load title feature
        $.post('@Url.Action("GetTitle", "Feature")', { Id: id }, function (reval) {
            $('#h-title').text('Thêm xóa dịch vụ của:' + reval);
        });
        //load all provide feature
        $.post('@Url.Action("GetFeatureItem", "Feature")', { id: id }, function (reval) {
            $('#list-item-selected').html('');
            for (var i = 0; i < reval.length; i++) {
                // load 1 provide feature
                $.post('@Url.Action("GetByID", "Provide")', { id: reval[i].ProvideID, fiid: reval[i].ID }, function (res) {
                    $('#list-item-selected').append('<div id="" class="itemselected">'
                            + res.title + '(' + res.owner + ')'
                            + '<span onclick="removeItem(' + res.fiid + ',this)">X</span>'
                            + '</div>');
                });
            }
        });
        // show modal
        $('#div-provide-box').modal({ show: true })
        //search provide
        $('#search-title').keyup(function () {
            var s = $(this).val();
            if (s.length > 1) {
                $('#result-title').html('');
                $.post('@Url.Action("SearchByTitle", "Provide")', { s: s }, function (reval) {
                    var html = '';
                    for (var i = 0; i < reval.length; i++) {
                        html += '<option value="' + reval[i].id + '">' + reval[i].title + '(' + reval[i].owner + ')' + '</option>';
                    }
                    $('#result-title').html(html);
                });
            }
        });
    }
    // add provide to feature
    $('#btn-add-provide').click(function () {
        var ids = $('#result-title').val();
        for (var i = 0; i < ids.length; i++) {
            $.post('@Url.Action("AddFeatureItem", "Feature")', { fID: curProvideID, itemID: ids[i] }, function (reval) {
                if (reval != false && reval != 'false') {
                    //load provide to display
                    $.post('@Url.Action("GetByID", "Provide")', { id: reval.ProvideID, fiid: reval.ID }, function (res) {
                        $('#list-item-selected').append('<div id="" class="itemselected">'
                                + res.title + '(' + res.owner + ')'
                                + '<span onclick="removeItem(' + res.fiid + ',this)">X</span>'
                                + '</div>');
                    });
                }
            });
        }
    });
    function removeItem(id, span) {
        $.post('@Url.Action("RemoveFeatureItem", "Feature")', { id: id }, function () {
            $(span).parent().remove();
        });
    }
    function deleteFeature(id) {
        if (confirm('Xóa thật à :))')) {
            $.post('@Url.Action("DeleteFeature", "Feature")', { id: id }, function (reval) {
                if (reval) {
                    $('#' + id).remove();
                }
            });
        }
    }
</script>
